<template>
	<view class="flzs">
		<navbar></navbar>
		<view class="flzs-top">
			<image src="../../../static/会员背.png" mode=""></image>
			<view class="flzs-top-left">
				<van-icon name="arrow-left" color="white" size="20px" @click="leftHandler" />
			</view>
		</view>
		<view class="flzs-content">
			<view class="flzs-content-view" v-for="item in article" :key="item.id">
				<view class="vw1">{{item.title}}</view>
				<text class="flzs-content-view-text1">{{item.content}}</text>
				<view class="flzs-content-view-content">
					<view class="view2">《民法典》第一千零七十九条</view>
					<text>夫妻一方要求离婚的，可以由有关组织进行调解或者直接向人民法院提起离婚诉讼。</text>
					<text>人民法院审理商婚案件，应当进行调解；如果感情确已破裂，调解无效的，应当准予离婚。</text>
					<text>有下列情形之一，调解无效的，应当准予离婚：</text>
					<view class="view3">
						<text>(一)重婚或者与他人同居；</text>
						<text>(二)实施家庭暴力或者虐待、遗弃家庭成员;</text>
						<text>(三)有赌博、吸毒等恶习屡教不改；</text>
						<text>(四)因感情不和分居满二年;</text>
						<text>(五）其他导致夫妻感情破裂的情形。</text>
					</view>
					<text>一方被宣告失踪，另一方提起离婚诉讼的，应当准予离婚。</text>
					<text>经人民法院判决不准离婚后，双方又分居满一年，一方再次提起离婚诉讼的，应当准予离婚。</text>
				</view>
				<view class="flzs-content-view-bottom">
					<view class="flzs-content-view-bottom-vw">
						<image src="../../../static/眼睛@1x.png" mode=""></image>
						<text>{{item.visit}}</text>
					</view>
					<view class="flzs-content-view-bottom-vw1">
						<image src="../../../static/点赞@1x.png" mode=""></image>
						<text>{{item.like}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="flzs-cell">
			<van-cell title="诉讼时效" is-link />
			<van-cell title="取保候审" is-link />
			<van-cell title="关于办理'套路贷'刑事案件若干问题的意见"  is-link />
			<van-cell title="套路贷司法解释" is-link />
			<van-cell title="借钱不还怎么办" is-link />
		</view>
		<view class="Inv1">
			<view class="Inv1-vw">
				<view class="Inv1-vw-left">
					<view class="">刑</view>
					<text class="text3">大学毕业后，档案去哪儿了?</text>
				</view>
				<text class="text4">到机关、国有企事业单位就业或定向招生就业的，档案转递至就业单位或定向单位。到非公单位55555555555555</text>
				<view class="Inv1-view">
					<view class="" style="margin-right: 74rpx;"><image src="../../static/眼睛@1x.png" style="width: 24rpx; height: 24rpx;"></image>119</view>
					<view class=""><image src="../../static/点赞@1x.png" style="width: 24rpx; height: 24rpx;"></image>0</view>
				</view>
				<view class="Inv1-vw-bottom">
					<image src="../../../static/头像.png" mode=""></image>
					<text class="textchen">陈全锦</text>
					<text class="textlv">律师</text>
					<text class="textjie">解答116.1万次</text>
				</view>
			</view>
		</view>
		<view class="footer" v-for="i in article" :key="i.id">
			<view class="footer-left">
				<van-icon :name="isLike ? tbkong : tbshi" :info="i.like" size="30px" @click="zanHandler" />
			</view>
			<view class="green">
				<image src="../../../static/白电话.png" mode="" @click="jishi"></image>
				<view class="" style="width: 1px; height: 25px; background-color: white;"></view>
				<view class="wt" @click="weit">
					<text class="wtls">委托律师</text>
					<text class="bendi">本地专家律师1对1</text>
				</view>
				<view style="width: 1px; height: 25px; background-color: white;"></view>
				<view class="wt" @click="mianf">
					<text class="wtls">免费咨询</text>
					<text class="bendi">每天两次免费问</text>
				</view>
				<view style="width: 1px; height: 25px; background-color: white;"></view>
				<view class="right" @click="open">
					<van-icon name="qr" color="white" size="28px"/>
				</view>
			</view>
		</view>
	</view>
	<van-toast id="van-toast" />
	<van-popup
	  :show="show"
	  position="bottom"
		closeable
		round
	  custom-style="height: 40%; background-color: #EDEDED;"
	  @close="onClose">
		<view class="van-popup">
			<text>选择更多法律服务</text>
			<view class="van-popup-view" @click="tiao">
				<view class="van-popup-view-vw">
					<image src="../../../static/白咨询.png" mode=""></image>
					<text>免费咨询</text>
				</view>
				<view class="van-popup-view-vw">
					<image src="../../../static/白私问.png" mode=""></image>
					<text>私问</text>
				</view>
				<view class="van-popup-view-vw">
					<image src="../../../static/白电话.png" mode=""></image>
					<text>电话咨询</text>
				</view>
				<view class="van-popup-view-vw">
					<image src="../../../static/白律师.png" mode=""></image>
					<text>律师约见</text>
				</view>
				<view class="van-popup-view-vw">
					<image src="../../../static/白背章.png" mode=""></image>
					<text>合同审查</text>
				</view>
				<view class="van-popup-view-vw">
					<image src="../../../static/白文书.png" mode=""></image>
					<text>文书代写</text>
				</view>
				<view class="van-popup-view-vw">
					<image src="../../../static/白律师函.png" mode=""></image>
					<text>律师函</text>
				</view>
				<view class="van-popup-view-vw">
					<image src="../../../static/白户籍.png" mode=""></image>
					<text>户籍调查</text>
				</view>
				<view class="van-popup-view-vw">
					<image src="../../../static/白起诉状.png" mode=""></image>
					<text>民事起诉状</text>
				</view>
				<view class="van-popup-view-vw">
					<image src="../../../static/白离婚.png" mode=""></image>
					<text>离婚咨询</text>
				</view>
				<view class="van-popup-view-vw">
					<image src="../../../static/白仲裁.png" mode=""></image>
					<text>劳动仲裁委托</text>
				</view>
				<view class="van-popup-view-vw">
					<image src="../../../static/白委托.png" mode=""></image>
					<text>委托律师</text>
				</view>
				<view class="van-popup-view-vw">
					<image src="../../../static/白工伤.png" mode=""></image>
					<text>工伤赔偿</text>
				</view>
				<view class="van-popup-view-vw">
					<image src="../../../static/白协议.png" mode=""></image>
					<text>合伙协议</text>
				</view>
			</view>
		</view>
	</van-popup>
</template>

<script>
	import Toast from '@vant/weapp/dist/toast/toast';
	import { knowDetail, userLike } from '../../../utils/utils';
	export default {
		data() {
			return {
				list: [], // 初始数组1
				article: [], // 初始数组2
				id: '', // 文章id
				tbkong: "good-job-o",
				tbshi: "good-job",
				isLike: true,
				show: false,
			}
		},
		onLoad(option) {
			let a = {
				id: String(option.id)
			}
			this.id = option.id
			knowDetail(a, (res) => {
				console.log('法律知识详细内容', res.data);
				// console.log('内容', res.data);
				this.list = res.data.list
				this.article.push(res.data.article)
				// console.log(this.article);
			})
			const flzslike = uni.getStorageSync('flzslike');
			// console.log(likedStatus);
			if (flzslike !== undefined) {
				this.isLike = flzslike;
			}
		},
		methods: {
			// 后退
			leftHandler () {
				uni.navigateBack(-1)
			},
			// 点赞
			zanHandler () {
				let that = this
				userLike(this.id, (res) => {
					console.log('文章点赞', res);
					if (res.status == 200) {
						Toast(res.mgs)
						that.$nextTick(() => {
							knowDetail(that.id, (res) => {
							this.list = res.data.list
							this.article.push(res.data.article)
							that.isLike = false
							let b = false
							uni.setStorageSync('flzslike', b);
							})
						})
					} else {
						Toast(res.msg)
						this.isLike = false
						let b = false
						uni.setStorageSync('flzslike', b);
					}
				})
			},
			// 跳转到计时电话页
			jishi () {
				uni.navigateTo({
					url: "/pages/Attorney side/consult/consult?name=计时电话"
				})
			},
			// 跳转到委托律师页
			weit () {
				uni.navigateTo({
					url: "/pages/Attorney side/consult/consult?name=委托律师"
				})
			},
			// 跳转到免费咨询页
			mianf () {
				uni.navigateTo({
					url: "/pages/Attorney side/consult/consult?name=免费咨询"
				})
			},
			// 打开模态框
			open () {
				this.show = true
			},
			// 关闭模态框
			onClose () {
				this.show = false
			},
			tiao (e) {
				// console.log(e);
			}
		}
	}
</script>

<style scoped lang="scss">
	.flzs {
		width: 100vw;
		height: 100vh;
		background-color: #EDEDED;
	}
	.flzs-top {
		width: 100vw;
		height: 100px;
		position: relative;
	}
	.flzs-top > image {
		width: 100vw;
		height: 100px;
	}
	.flzs-top-left {
		position: absolute;
		left: 10px;
		top: 10px;
	}
	
	.flzs-content {
		width: 100vw;
		height: 60vh;
		border-radius: 8px 8px 0 0;
		position: relative;
		background-color: white;
		top: -6px;
		left: 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.flzs-content-view {
		width: 94vw;
		height: 94%;
		font-size: 15px;
		display: flex;
		flex-direction: column;
		border-radius: 8px 8px 0 0;
	}
	.flzs-content-view > .vw1 {
		font-weight: bold;
		font-size: 20px;
	}
	.flzs-content-view > .flzs-content-view-text1 {
		margin: 10px 0 15px 0;
	}
	.flzs-content-view-content {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.flzs-content-view-content > .view3 {
		display: flex;
		flex-direction: column;
	}
	.flzs-content-view-content > .view3 > text {
		margin-left: 10px;
	}
	
	.flzs-content-view-bottom {
		width: 100%;
		height: 30px;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		margin-top: 20px;
	}
	.flzs-content-view-bottom-vw > image {
		width: 12px;
		height: 12px;
	}
	.flzs-content-view-bottom-vw > text {
		margin-left: 5px;
	}
	.flzs-content-view-bottom-vw1 > image {
		width: 12px;
		height: 12px;
	}
	.flzs-content-view-bottom-vw1 > text {
		margin-left: 5px;
	}
	.flzs-content-view-bottom > .flzs-content-view-bottom-vw1 {
		margin-left: 50px;
	}
	
	.flzs-cell {
		width: 100vw;
		height: 220px;
		margin: 2px 0 2px 0;
	}
	.Inv1 {
		width: 100vw;
		padding-bottom: var(--safe-area-inset-bottom);
	}
	.Inv1-vw {
		width: 694rpx;
		height: 282rpx;
		margin: 32rpx 0 0 28rpx;
		border-bottom: 2rpx solid #F0F0F0;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding-bottom: var(--safe-area-inset-bottom);
	}
	.Inv1-vw-left {
		display: flex;
		height: 25px;
	}
	.Inv1-vw-left > view {
		width: 23px;
		height: 23px;
		background-color: #1f4c7e;
		border-radius: 50% 50% 50% 20%;
		color: white;
		font-size: 14px;
		text-align: center;
		line-height: 23px;
	}
	.Inv1-vw-left > .text3 {
		display: block;
		font-size: 32rpx;
		font-weight: bold;
		line-height: 50rpx;
		color: #383838;
		margin-left: 10rpx;
	}
	.Inv1-vw > .text4 {
		width: 694rpx;
		font-size: 28rpx;
		font-weight: normal;
		line-height: 32rpx;
		color: #4D4D4D;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;  
		overflow: hidden;
	}
	.Inv1-view {
		display: flex;
		color: #A6A6A6;
		align-items: center;
	}
	.Inv1-vw-bottom {
		height: 40px;
		display: flex;
		align-items: center;
	}
	.Inv1-vw-bottom > image {
		width: 30px;
		height: 30px;
	}
	.Inv1-vw-bottom > .textchen {
		margin-left: 5px;
	}
	.Inv1-vw-bottom > .textlv {
		font-size: 14px;
		margin: 0 5px 0 5px;
	}
	.Inv1-vw-bottom > .textjie {
		font-size: 15px;
		color: #a59999;
	}
	
	.footer {
		width: 100vw;
		height: 70px;
		background-color: white;
		position: fixed;
		left: 0;
		bottom: 0;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	.footer > .footer-left {
		width: 40px;
		height: 40px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.green {
		width: 300px;
		height: 40px;
		display: flex;
		align-items: center;
		justify-content: space-around;
		background-color: #1aad19;
		border-radius: 30px;
		margin-right: 10px;
	}
	.green > image {
		width: 30px;
		height: 30px;
		border-radius: 50%;
		margin-left: 5px;
	}
	.green > .wt {
		width: 90px;
		height: 30px;
		font-size: 12px;
		color: white;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.wt > .bendi {
		font-size: 10px;
	}
	.right {
		width: 40px;
		height: 40px;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 3px;
	}
	
	.van-popup {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.van-popup > text {
		font-size: 28rpx;
		margin-top: 40rpx;
	}
	.van-popup > .van-popup-view {
		width: 91%;
		height: 91%;
	}
	.van-popup-view {
		display: flex;
		flex-wrap: wrap;
		margin-top: 20rpx;
	}
	.van-popup-view-vw > image {
		width: 84rpx;
		height: 84rpx;
	}
	.van-popup-view-vw {
		width: 20%;
		height: 128rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10rpx;
	}
	.van-popup-view :nth-child(11) > text {
		width: 144rpx;
	}
	
	.van-popup-view-vw > text {
		font-size: 24rpx;
	}
</style>
